<template>
  <div class="issues-item">
    <div class="issues-item__title">
      <router-link
        :to="{
          name: 'issuesDetail',
          params: {
            number: data.number,
            repo: params.repo,
            owner: params.owner,
          }
        }"
      >
        {{data.title}}
      </router-link>
      <span
        class="issues-item__label"
        v-for="label of data.labels"
        :key="label.id"
        :style="{backgroundColor: `#${label.color}`}"
      >
        {{ label.name }}
      </span>
    </div>
    <div class="issues-item__info">
      <div class="issues-item__info-left">
        <Open-browser :href="data.html_url" class="issues-item__number">#{{data.number}}</Open-browser> by
        <Open-browser
          v-if="data.user"
          class="issues-item__creator"
          :href="data.user.html_url"
        >
          {{data.user.name}}
        </Open-browser>
      </div>
      <div class="issues-item__info-right">
        <div class="issues-item__assignee" v-if="data.assignee">
          指派给：
          <Avatar :url="data.assignee.avatar_url" size="24"/>
          <Open-browser
            class="issues-item__assignee-name"
            :href="data.assignee.html_url"
          >
            {{ data.assignee.name }}
          </Open-browser>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar.vue'

export default {
  components: {
    Avatar
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    currentRepo: {
      type: String,
      required: true
    }
  },
  computed: {
    params () {
      const [owner, repo] = this.currentRepo.split('/')
      return { owner, repo }
    }
  }
}
</script>

<style lang="scss">
.issues-item {
  font-size: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: inset 0px -1px 0px 0px #DEDEDF;
}
.issues-item__title {
  a {
    cursor: pointer;
  }
}

.issues-item__label {
  color: #fff;
  padding: 0 4px;
  border-radius: 4px;
  margin-right: 4px;
  background-color: #888;
}

.issues-item__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.issues-item__assignee {
  display: flex;
  align-items: center;
}

.issues-item__assignee-name {
  margin-left: 4px;
}
</style>